<template>
  <div class="container" ref="containerRef"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/index.css";
import { TestData, AnimatRect, AnimatEdge, HtmlRect } from "./data/base";
/// data
const containerRef = ref();
let LF_Instance = null;

/// methods
/**
 * 初始化方法
 */
function init() {
  LF_Instance = new LogicFlow({
    // 容器配置
    container: containerRef.value,
    // 画布配置
    width: 700,
    height: 600,
    background: {
      color: "#F0F0F0",
    },
    grid: {
      type: "dot",
      size: 20,
    },
    // 工具配置
    textEdit: true,
    isSilentMode: false,
    edgeType: "line",
    // animation: true,
    snapline: true,
    // 样式配置
    style: {
      rect: {
        radius: 6,
      },
    },
  });

  // 注册自定义节点
  LF_Instance.register(AnimatRect);
  LF_Instance.register(HtmlRect);
  LF_Instance.register(AnimatEdge);
  // 渲染数据

  flowRender(TestData);
}
/**
 * 渲染数据
 * @param data
 */
function flowRender(data) {
  LF_Instance.render(data);
}

/// hooks
onMounted(init);
</script>

<style scoped>
.container {
  width: 100%;
  height: 600px;
  align-items: center;
}

:deep(.node-table) {
  width: 100%;
  background: rgb(54, 188, 221);
  border-collapse: collapse;
}
</style>
